<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="企业开户" @clickLeft="back"/>
		<view class="page">
				<uni-forms ref="baseForm" :model="model" :rules="rules" label-position="top" label-width="150">
					<uni-collapse>
						<uni-forms-item label="企业名称" name="account_name" required>
							<uni-easyinput v-model="model.account_name" :maxlength="32" placeholder="请输入企业名称" />
						</uni-forms-item>
						<uni-forms-item label="营业执照号" name="id_no" required>
							<uni-easyinput v-model="model.id_no" placeholder="请输入营业执照号" />
						</uni-forms-item>
						<uni-forms-item label="组织机构代码" name="orgcodes">
							<uni-easyinput v-model="model.orgcodes" placeholder="请输入组织机构代码" />
						</uni-forms-item>
						<uni-forms-item label="税务登记证号码" name="ratcodes">
							<uni-easyinput v-model="model.ratcodes" placeholder="请输入税务登记证号码" />
						</uni-forms-item>
						<uni-forms-item label="营业执照有效期(起)" name="id_start_date" required>
							<uni-datetime-picker v-model="model.id_start_date" type="date" placeholder="请选择营业执照起始日期"/>
						</uni-forms-item>
						<uni-forms-item label="营业执照有效期(止)" name="id_end_date" required>
							<uni-row :gutter="20">
								<uni-col :span="18">
									<uni-datetime-picker v-model="model.id_end_date" type="date" placeholder="请选择营业执照失效日期"/>
								</uni-col>
								<uni-col :span="6">
									<button class="long-button" type="warn" plain size="mini" @click="clickLongDate">长期</button>
								</uni-col>
							</uni-row>
						</uni-forms-item>
						<uni-forms-item label="企业地址" name="id_address" required>
							<uni-easyinput type="textarea" :maxlength="200" v-model="model.id_address" placeholder="请输入企业地址" />
						</uni-forms-item>
						<uni-forms-item label="经营范围" name="zsopscope" required>
							<uni-easyinput type="textarea" v-model="model.zsopscope" placeholder="请输入经营范围" />
						</uni-forms-item>
						<uni-forms-item label="营业执照" name="business_no" required>
							<upload-id-card file-type="12" :width="258" :height="158" v-model="model.business_no" @onSelect="handleSelectFile"></upload-id-card>
						</uni-forms-item>
						<uni-forms-item label="银行卡号" name="primary_account" required>
							<uni-easyinput :maxlength="32" v-model="model.primary_account" placeholder="请输入银行卡号" />
						</uni-forms-item>
						<uni-forms-item label="开户行号" name="bank_no" required>
							<uni-easyinput :maxlength="32" v-model="model.bank_no" placeholder="请输入开户行号" />
						</uni-forms-item>
						<uni-forms-item label="开户行名" name="bank_name" required>
							<uni-easyinput :maxlength="200" v-model="model.bank_name" placeholder="请输入开户行名" />
						</uni-forms-item>
						<uni-row :gutter="20">
							<uni-col :span="12">
								<uni-forms-item label="法人身份证正面照" name="id_card_front_no" required>
									<upload-id-card open-type="business" file-type="01" v-model="model.id_card_front_no" @onSelect="handleSelectFile"></upload-id-card>
								</uni-forms-item>
							</uni-col>
							<uni-col :span="12">
								<uni-forms-item label="法人身份证国徽面" name="id_card_back_no" required>
									<upload-id-card open-type="business" file-type="02" v-model="model.id_card_back_no" @onSelect="handleSelectFile"></upload-id-card>
								</uni-forms-item>
							</uni-col>
						</uni-row>
						<uni-forms-item label="法人证件号" name="company_id_no" required>
							<uni-easyinput :maxlength="32" v-model="model.company_id_no" placeholder="请输入法人证件号"/>
						</uni-forms-item>
						<uni-forms-item label="法人姓名" name="company_id_name" required>
							<uni-easyinput :maxlength="60" v-model="model.company_id_name" placeholder="请输入法人姓名"/>
						</uni-forms-item>
						<uni-forms-item label="法人证件有效期(止)" name="company_opto" required>
							<uni-datetime-picker v-model="model.company_opto" type="date" placeholder="请选择法人有效期截止"/>
						</uni-forms-item>
						<uni-forms-item label="受益人证件号" name="bene_id_no" required>
							<uni-easyinput :maxlength="32" v-model="model.bene_id_no" placeholder="请输入受益人证件号"/>
						</uni-forms-item>
						<uni-forms-item label="受益人姓名" name="bene_name" required>
							<uni-easyinput :maxlength="60" v-model="model.bene_name" placeholder="请输入受益人姓名"/>
						</uni-forms-item>
						<uni-forms-item label="受益人性别" name="sex" required>
							<uni-data-checkbox v-model="model.sex" :localdata="[{text: '男', value: 0}, {text: '女', value: 1}]" />
						</uni-forms-item>
						<uni-forms-item label="受益人国籍" name="bene_nationality" required>
							<uni-easyinput :maxlength="60" v-model="model.bene_nationality" placeholder="请输入受益人国籍"/>
						</uni-forms-item>
						<uni-forms-item label="受益人证件有效期(止)" name="bene_opto" required>
							<uni-datetime-picker v-model="model.bene_opto" type="date" placeholder="请选择受益人有效期截止"/>
						</uni-forms-item>
						<uni-forms-item label="受益人身份证地址" name="bene_addr" required>
							<uni-easyinput type="textarea" :maxlength="200" v-model="model.bene_addr" placeholder="受益人身份证地址" />
						</uni-forms-item>
						<uni-forms-item label="实际控制人证件号" name="controller_id_no" required>
							<uni-easyinput :maxlength="32" v-model="model.controller_id_no" placeholder="请输入实际控制人证件号"/>
						</uni-forms-item>
						<uni-forms-item label="实际控制人姓名" name="controller_id_name" required>
							<uni-easyinput :maxlength="60" v-model="model.controller_id_name" placeholder="请输入实际控制人姓名"/>
						</uni-forms-item>
						<uni-forms-item label="实际控制人有效期截止" name="controller_opto" required>
							<uni-datetime-picker v-model="model.controller_opto" type="date" placeholder="请选择实际控制人有效期截止"/>
						</uni-forms-item>
						<uni-collapse-item title="企业负责人(默认为法人)" title-border="none" thumb="/static/images/info.png">
							<uni-forms-item label="负责人证件号" name="leader_id_no">
								<uni-easyinput :maxlength="32" v-model="model.leader_id_no" placeholder="请输入负责人证件号"/>
							</uni-forms-item>
							<uni-forms-item label="负责人姓名" name="leader_id_name">
								<uni-easyinput :maxlength="60" v-model="model.leader_id_name" placeholder="请输入负责人姓名"/>
							</uni-forms-item>
							<uni-forms-item label="负责人有效期截止" name="leader_opto">
								<uni-datetime-picker v-model="model.leader_opto" type="date" placeholder="请选择负责人有效期截止"/>
							</uni-forms-item>
						</uni-collapse-item>
						<uni-collapse-item title="经办人(默认为法人)" title-border="none" thumb="/static/images/info.png">
							<uni-forms-item label="经办人证件号" name="operator_id_no">
								<uni-easyinput :maxlength="32" v-model="model.operator_id_no" placeholder="请输入经办人证件号"/>
							</uni-forms-item>
							<uni-forms-item label="经办人姓名" name="operator_id_name">
								<uni-easyinput :maxlength="60" v-model="model.operator_id_name" placeholder="请输入经办人姓名"/>
							</uni-forms-item>
							<uni-forms-item label="经办人手机号" name="operator_mobile">
								<uni-easyinput type="number" :maxlength="11" v-model="model.operator_mobile" placeholder="请输入经办人手机号"/>
							</uni-forms-item>
							<uni-forms-item label="经办人有效期截止" name="operator_opto">
								<uni-datetime-picker v-model="model.operator_opto" type="date" placeholder="请选择经办人有效期截止" @maskClick="maskClick"/>
							</uni-forms-item>
						</uni-collapse-item>
						<uni-forms-item label="负责人手机号" name="mobile" required>
							<uni-easyinput type="number" :maxlength="11" v-model="model.mobile" placeholder="请输入负责人手机号"/>
						</uni-forms-item>
						<uni-forms-item label="验证码" name="verify_code" required>
							<send-sms-code :mobile="model.mobile" :card_name="model.account_name" :id_no="model.id_no" :card_no="model.primary_account" v-model="model.verify_code" @onSend="handleOnSendCode"></send-sms-code>
						</uni-forms-item>
					</uni-collapse>
				</uni-forms>
				<show-agreement v-model="model.agreement_no" />
				<button type="primary" @click="onSubmit">确认开户</button>
			</view>
		</view>
	</template>

<script>
	import UploadIdCard from "@/components/formItem/UploadIdCard"
	import SendSmsCode from "@/components/formItem/SendSmsCode"
	import ShowAgreement from "@/components/ShowAgreement"
	
	export default {
		components : {
			UploadIdCard, SendSmsCode, ShowAgreement
		},
		
		data() {
			return {
				model: {},
				rules: {
					account_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确企业名称'}
						]
					},
					id_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确营业执照号'}
						]
					},
					id_start_date: {
						rules: [
							{ required: true, errorMessage: '请选择营业执照有效期'}
						]
					},
					id_end_date: {
						rules: [
							{ required: true, errorMessage: '请选择营业执照有效期'}
						]
					},
					id_address: {
						rules: [
							{ required: true, errorMessage: '请输入正确地址'}
						]
					},
					zsopscope: {
						rules: [
							{ required: true, errorMessage: '请输入正确经营范围'}
						]
					},
					business_no: {
						rules: [
							{ required: true, errorMessage: '请上传营业执照'}
						]
					},
					id_card_front_no: {
						rules: [
							{ required: true, errorMessage: '请上传法人身份证正面照'}
						]
					},
					id_card_back_no: {
						rules: [
							{ required: true, errorMessage: '请上传法人身份证背面照'}
						]
					},
					
					
					realname: {
						rules: [
							{ required: true, errorMessage: '请输入正确真实姓名'}
						]
					},
					primary_account: {
						rules: [
							{ required: true, errorMessage: '请输入正确银行卡号'}
						]
					},
					bank_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确开户行号'}
						]
					},
					bank_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确开户行名'}
						]
					},
					company_id_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确法人姓名'}
						]
					},
					company_id_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确法人证件号'}
						]
					},
					company_opto: {
						rules: [
							{ required: true, errorMessage: '请选择法人身份证有效期'}
						]
					},
					
					controller_id_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确控制人姓名'}
						]
					},
					controller_id_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确控制人证件号'}
						]
					},
					controller_opto: {
						rules: [
							{ required: true, errorMessage: '请选择控制人身份证有效期'}
						]
					},
					
					bene_name: {
						rules: [
							{ required: true, errorMessage: '请输入正确受益人姓名'}
						]
					},
					bene_sex: {
						rules: [
							{ required: true, errorMessage: '请选择受益人性别'}
						]
					},
					bene_nationality: {
						rules: [
							{ required: true, errorMessage: '请输入正确受益人国籍'}
						]
					},
					bene_id_no: {
						rules: [
							{ required: true, errorMessage: '请输入正确受益人证件号'}
						]
					},
					bene_opto: {
						rules: [
							{ required: true, errorMessage: '请选择法人受益人有效期'}
						]
					},
					bene_addr: {
						rules: [
							{ required: true, errorMessage: '请输入正确受益人身份证地址'}
						]
					},
					mobile: {
						rules: [
							{ required: true, errorMessage: '请输入正确手机号'}
						]
					},
					verify_code: {
						rules: [
							{ required: true, errorMessage: '请输入正确验证码'}
						]
					}
				}
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		},
		
		methods: {
			back() {
				uni.redirectTo({
					url: '/pages/openAccount/index'
				})
			},
			
			clickLongDate() {
				this.$set(this.model,'id_end_date','2099-12-31')
			},
			
			handleSelectFile(data) {
				 this.model = {
					 ...this.model,
					 ...data
				 }
			},
			
			handleOnSendCode(data) {
				this.model = {
					 ...this.model,
					 ...data
				}
			},
			
			onSubmit() {
				// 91330105MA2H3W4D1M
				if(!('trade_no' in this.model) || this.model.trade_no == "" ) {
					uni.showToast({
						icon: 'error',
						title: '请先发送验证码'
					})
					return ;
				}

				if(!('agreement_no' in this.model) || this.model.agreement_no == "") {
					uni.showToast({
						icon: 'error',
						title: '请勾选开户协议'
					})
					return ;
				}
				
				this.$refs.baseForm.validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					uni.request({
						url: "/account/openBusiness",
						data: {
							uid: uni.getStorageSync('uid'),
							...this.model
						},
						method: "POST",
						success: (res) => {
							if(res.data.success) {
								uni.showToast({
									icon: 'success',
									title: '开户成功'
								})
								setTimeout( () => {
									uni.redirectTo({
										url: '/pages/index/index'
									})
								}, 2000)
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.errMessage
								})
							}
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.page {
		width: 750rpx;
		background: #fff;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}
	
	/deep/ .uni-collapse-item__title-box {
		padding: 0;
	}
	
	/deep/ .uni-collapse-item__title-img {
	    height: 32rpx;
	    width: 32rpx;
	}
</style>